<template>
  <div class="addSales">
    <div class="top">
      <el-button :class="{ btn: current === 1 }" @click="getDynamics">视频链接区</el-button>
      <el-button :class="{ btn: current === 2 }" @click="getShop">商城链接区</el-button>
    </div>
    <div class="sectionOne">
      <el-row>
        <el-col :span="20">
          <div class="grid-content bg-purple">注：数量可为0、4、5、8、10及以上，名称最多5个字符，建议尺寸：300*300px</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light" style="text-align: right">
            <el-button
              style="width:87px;background-color: #1BA687;color:#ffffff"
              size="small"
              @click="addLink"
            >添加</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div v-if="current === 2" key="1" class="sectionTwo">
      <!-- <el-row class="first">
        <el-col :span="2">
          <div class="grid-content bg-purple-dark">序号</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-dark">图片</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple-dark">名称</div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-dark">详情链接</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple-dark">排序</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-dark">操作</div>
        </el-col>
      </el-row>
      <el-row v-for="(item, index) in addList" :key="index" class="second">
        <el-col :span="2">
          <div class="grid-content bg-purple-dark">{{ index }}</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-dark img">
            <p class="cover">
              <i class="el-icon-picture" />
              <label class="upload">
                <input type="file" @change="getImg(item.id, $event)">
              </label>
              <img :src="item.image" alt>
            </p>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple-dark todayUpdata">
            <el-input
              v-model="item.name"
              size="mini"
              style="width:118px"
              @blur="uploadName(item.id, $event)"
            />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-dark detailLink">
            <el-input
              v-model="item.link"
              size="mini"
              style="width:300px"
              @change="uploadLink(item.id, $event)"
            />
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple-dark sort">
            <el-input
              v-model="item.sort"
              size="mini"
              style="width:71px"
              @blur="uploadSort(item.id, $event)"
            />
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-dark">
            <el-button
              type="info"
              size="small"
              style="width:70px;height:34px;background-color: #2B333E"
              @click="delLink(item.id)"
            >删除</el-button>
          </div>
        </el-col>
      </el-row> -->
      <el-table :data="addList" border style="width: 100%">
        <el-table-column label="序号" width="" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.$index + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="图片" width="180" align="center">
          <template slot-scope="scope">
            <div>
              <my-upload :img="scope.row.image !== '...' ? scope.row.image : ''" :width="80" :height="80" medium="medium" @click.native="setIdClick(scope.row.id)" @success="handleSuccess" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="名称" align="center">
          <template slot-scope="scope">
            <div class="bg-purple-dark todayUpdata">
              <el-input
                v-model="scope.row.name"
                size="mini"
                style="width:118px"
                @blur="uploadName(scope.row.id, $event)"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="对应分类" align="center">
          <template slot-scope="scope">
            <div class="bg-purple-dark detailLink">
              <el-select
                v-model="scope.row.classfiyid"
                placeholder="请选择对应分类"
                @change="uploadClassic(scope.row.id, scope)"
              >
                <el-option
                  v-for="item in classifyList"
                  :key="item.id"
                  :label="item.dynamic_name"
                  :value="item.id"
                />
              </el-select>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="链接" width="400">
          <template slot-scope="scope">
            <div class="bg-purple-dark detailLink">
              <el-input
                v-model="scope.row.link"
                size="mini"
                style="width:300px"
                @blur="uploadLink(scope.row.id, $event, scope)"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="排序" align="center">
          <template slot-scope="scope">
            <div class="bg-purple-dark sort">
              <el-input
                v-model="scope.row.sort"
                size="mini"
                style="width:71px"
                @blur="uploadSort(scope.row.id, $event)"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" align="center">
          <template slot-scope="scope">
            <div class="bg-purple-dark">
              <el-button
                type="info"
                size="small"
                style="width:70px;height:34px;background-color: #2B333E"
                @click="delLink(scope.row.id)"
              >
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="current === 1" key="2" class="sectionTwo">
      <!-- <el-row class="first">
        <el-col :span="2">
          <div class="grid-content bg-purple-dark">序号</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-dark">图片</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple-dark">名称</div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-dark">对应分类</div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple-dark">排序</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-dark">操作</div>
        </el-col>
      </el-row> -->
      <!-- <el-row v-for="(item, index) in addList" :key="item.id" class="second">
        <el-col :span="2">
          <div class="grid-content bg-purple-dark">{{ index }}</div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-dark img">
            <p class="cover">
              <i class="el-icon-picture" />
              <label class="upload">
                <input type="file" @change="getImg(item.id, $event)">
              </label>
              <img :src="item.image" alt="">
            </p>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple-dark todayUpdata">
            <el-input
              v-model="item.name"
              size="mini"
              style="width:118px"
              @blur="uploadName(item.id, $event)"
            />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-dark detailLink">
            <el-select
              v-model="item.link"
              placeholder="请选择对应分类"
              @change="uploadLink(item.id, $event)"
            >
              <el-option
                v-for="item in classifyList"
                :key="item.id"
                :label="item.dynamic_name"
                :value="item.id"
              />
            </el-select>
            <el-input
              v-model="item.link"
              size="mini"
              style="width:300px"
              @blur="uploadLink(item.id, $event)"
            />
          </div>
        </el-col>
        <el-col :span="3">
          <div class="grid-content bg-purple-dark sort">
            <el-input
              v-model="item.sort"
              size="mini"
              style="width:71px"
              @blur="uploadSort(item.id, $event)"
            />
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-dark">
            <el-button
              type="info"
              size="small"
              style="width:70px;height:34px;background-color: #2B333E"
              @click="delLink(item.id)"
            >
              删除
            </el-button>
          </div>
        </el-col>
      </el-row>-->
      <el-table :data="addList" border style="width: 100%">
        <el-table-column label="序号" width="" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.$index + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="图片" width="180" align="center">
          <template slot-scope="scope">
            <div>
              <my-upload :img="scope.row.image !== '...' ? scope.row.image : ''" :width="80" :height="80" medium="medium" @click.native="setIdClick(scope.row.id)" @success="handleSuccess" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="名称" align="center">
          <template slot-scope="scope">
            <div class="bg-purple-dark todayUpdata">
              <el-input
                v-model="scope.row.name"
                size="mini"
                style="width:118px"
                @blur="uploadName(scope.row.id, $event)"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="对应分类" align="center">
          <template slot-scope="scope">
            <div class="bg-purple-dark detailLink">
              <el-select
                v-model="scope.row.classfiyid"
                placeholder="请选择对应分类"
                @change="uploadClassic(scope.row.id, scope)"
              >
                <el-option
                  v-for="item in classifyList"
                  :key="item.id"
                  :label="item.dynamic_name"
                  :value="item.id"
                />
              </el-select>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="链接" width="400">
          <template slot-scope="scope">
            <div class="bg-purple-dark detailLink">
              <el-input
                v-model="scope.row.link"
                size="mini"
                style="width:300px"
                @blur="uploadLink(scope.row.id, $event, scope)"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="排序" align="center">
          <template slot-scope="scope">
            <div class="bg-purple-dark sort">
              <el-input
                v-model="scope.row.sort"
                size="mini"
                style="width:71px"
                @blur="uploadSort(scope.row.id, $event)"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" align="center">
          <template slot-scope="scope">
            <div class="bg-purple-dark">
              <el-button
                type="info"
                size="small"
                style="width:70px;height:34px;background-color: #2B333E"
                @click="delLink(scope.row.id)"
              >
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getArticleClassifyList } from '@/api/dynamic-mng'
import { getLink, delLink, addLink } from '@/api/add-mng'
import { fileUpload } from '@/api/file'
import MyUpload from '@/views/add-editor/component/my-upload'
export default {
  name: 'AddLink',
  components: {
    MyUpload
  },
  data() {
    return {
      addList: [],
      current: 1,
      classifyList: [],
      id: ''
    }
  },
  created() {
    getArticleClassifyList().then(res => {
      if (res.code === 200) {
        this.classifyList = res.data
      }
    })
  },
  mounted() {
    this.getLink(1)
  },
  methods: {
    getDynamics() {
      this.addList = []
      this.getLink(1)
      this.current = 1
    },
    getShop() {
      this.addList = []
      this.getLink(2)
      this.current = 2
    },
    addLink() {
      if (this.current === 1) {
        addLink({
          id: '...',
          image: '...',
          name: '...',
          link: '...',
          sort: 1,
          status: 1
        }).then(res => {
          if (res.code === 200) {
            this.getLink(1)
          }
        })
      } else {
        addLink({
          id: '...',
          image: '...',
          name: '...',
          link: '...',
          sort: 1,
          status: 2
        }).then(res => {
          if (res.code === 200) {
            this.getLink(2)
          }
        })
      }
    },
    getLink(status) {
      getLink({
        status
      }).then(res => {
        if (res.code === 200) {
          // if (status === 1) {
          this.addList = []
          this.addList = res.data.map(item => {
            // item.link = item.link ? parseInt(item.link) : null
            return item
          })
          // } else {
          //   this.addList = res.data
          // }
        }
      })
    },
    delLink(id) {
      delLink({
        id
      }).then(res => {
        if (res.code === 200) {
          if (this.current === 1) {
            this.getLink(1)
          } else {
            this.getLink(2)
          }
        }
      })
    },
    setIdClick(id) {
      this.id = id
    },
    handleSuccess(url) {
      if (this.current === 1) {
        addLink({
          id: this.id,
          image: url
        }).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '上传成功',
              type: 'success'
            })
            this.getLink(1)
          }
        })
      } else {
        addLink({
          id: this.id,
          image: url
        }).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '上传成功',
              type: 'success'
            })
            this.getLink(2)
          }
        })
      }
    },
    getImg(id, e) {
      const file = e.target.files[0]
      const formData = new FormData()
      formData.append('files', file)
      fileUpload(formData).then(res => {
        if (this.current === 1) {
          addLink({
            id,
            image: res.data.files
          }).then(res => {
            if (res.code === 200) {
              this.$message({
                message: '上传成功',
                type: 'success'
              })
              this.getLink(1)
            }
          })
        } else {
          addLink({
            id,
            image: res.data.files
          }).then(res => {
            if (res.code === 200) {
              this.$message({
                message: '上传成功',
                type: 'success'
              })
              this.getLink(2)
            }
          })
        }
      })
    },
    uploadName(id, e) {
      if (this.current === 1) {
        addLink({
          id,
          name: e.target.value ? e.target.value : ''
        }).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '上传成功',
              type: 'success'
            })
            this.getLink(1)
          }
        })
      } else {
        addLink({
          id,
          name: e.target.value
        }).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '上传成功',
              type: 'success'
            })
            this.getLink(2)
          }
        })
      }
    },
    uploadLink(id, e, scope) {
      if (this.current === 1) {
        addLink({
          id,
          link: e.target.value,
          classfiyid: scope.row.classfiyid
        }).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.getLink(1)
          }
        })
      } else {
        console.log(e)
        addLink({
          id,
          link: e.target.value,
          classfiyid: scope.row.classfiyid
        }).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.getLink(2)
          }
        })
      }
    },
    uploadClassic(id, scope) {
      if (this.current === 1) {
        addLink({
          id,
          classfiyid: scope.row.classfiyid
        }).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.getLink(1)
          }
        })
      } else {
        addLink({
          id,
          classfiyid: scope.row.classfiyid
        }).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.getLink(2)
          }
        })
      }
    },
    uploadSort(id, e) {
      if (this.current === 1) {
        addLink({
          id,
          sort: e.target.value
        }).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.getLink(1)
          }
        })
      } else {
        addLink({
          id,
          sort: e.target.value
        }).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.getLink(2)
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.addSales {
  margin-top: 20px;
  margin-left: 20px;
  .top {
    color: #ffffff;
    .btn {
      background-color: #409eff;
      color: #ffffff;
    }
  }
  .sectionOne {
    width: 99%;
    margin-top: 20px;
    color: #e51c23;
    font-size: 14px;
  }
  .sectionTwo {
    width: 99%;
    margin-top: 20px;
    .grid-content {
      border: 1px solid #dddddd;
    }
    .first {
      line-height: 30px;
      background-color: #f5f5f5;
      font-size: 14px;
      text-align: center;
    }
    .second {
      height: 100px;
      line-height: 100px;
      background-color: rgba(248, 248, 248, 1);
      text-align: center;
      .img {
        .cover {
          position: relative;
          width: 80px;
          margin: 10px auto;
          text-align: center;
          line-height: 80px;
          background-color: #eeeeee;
          .el-icon-picture {
            font-size: 15px;
            color: #8c939d;
          }
          .upload {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
            input {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              opacity: 0;
            }
          }
          img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          }
        }
      }
      .todayUpdata {
        height: 102px;
        .updata {
          width: 118px;
          height: 25px;
          margin: 36px auto;
          background-color: #eeeeee;
          color: #333333;
          line-height: 20px;
          text-align: center;
          font-size: 14px;
          border: 1px solid #bbbbbb;
        }
      }
      .detailLink {
        height: 102px;
        .link {
          width: 300px;
          height: 25px;
          margin: 36px auto;
          background-color: #eeeeee;
          color: #333333;
          line-height: 20px;
          text-align: center;
          font-size: 14px;
          border: 1px solid #bbbbbb;
        }
      }
      .sort {
        height: 102px;
        .sort {
          width: 71px;
          height: 25px;
          margin: 36px auto;
          background-color: #eeeeee;
          color: #333333;
          line-height: 20px;
          text-align: center;
          font-size: 14px;
          border: 1px solid #bbbbbb;
        }
      }
    }
  }
}
.el-table /deep/ .img-wrapper{
  img{
    z-index: 1 !important;
  }
}
</style>
